<template>
  <div>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >

      <el-table-column
        align="center"
        label="ID"
        width="90"
      >
        <template slot-scope="{row}">
          <span>{{ row.u_id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="120px"
        align="center"
        label="姓名"
      >
        <template slot-scope="{row}">
          <span>{{ row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="60px"
        align="center"
        label="性别"
      >
        <template slot-scope="{row}">
          <span>{{ row.sex }}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="85px"
        label="籍贯"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.address }}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="user.role == 'student' || user.role == 'teacher'"
        align="center"
        width="100px"
        label="专业"
      >
        <template slot-scope="{row}">
          <span>{{ row.departments }}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="user.role == 'student' || user.role == 'teacher'"
        align="center"
        width="100px"
        label="班级"
      >
        <template slot-scope="{row}">
          <span>{{ row.classes }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        min-width="200px"
        label="邮箱"
      >
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input
              v-model="row.email"
              class="edit-input"
              size="small"
            />
            <el-button
              class="cancel-btn"
              size="small"
              icon="el-icon-refresh"
              type="warning"
              @click="cancelEdit(row)"
            >
              取消
            </el-button>
          </template>
          <span v-else>{{ row.email }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        min-width="120px"
        label="入网时间"
      >
        <template slot-scope="{row}">
          <span>{{ row.createtime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        width="120"
      >
        <template slot-scope="{row}">
          <el-button
            v-if="row.edit"
            type="success"
            size="small"
            icon="el-icon-circle-check"
            @click="confirmEdit(row)"
          >
            确认
          </el-button>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="row.edit=!row.edit"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getUser, updateEmailApi } from "../../../api/common-api/personInformation";

export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          role: "",
        };
      },
    },
  },
  data() {
    return {
      list: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const { data } = await getUser();
      let items = [];
      items.push(data[0]);
      this.list = items.map((v) => {
        // $set =>(newObject key value)
        this.$set(v, "edit", false);
        // originalEmail back-up
        v.originalEmail = v.email;
        return v;
      });
    },
    cancelEdit(row) {
      row.email = row.originalEmail;
      row.edit = false;
      this.$message({
        message: "已取消编辑",
        type: "warning",
      });
    },
    confirmEdit(row) {
      row.edit = false;
      // /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/
      var verifyEmail = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
      if (!verifyEmail.test(row.email)) {
        this.$alert("邮箱格式错误", "错误信息", {
          confirmButtonText: "确定",
        });
        row.email = row.originalEmail;
        return;

      } else {
        this.$confirm("确认修改邮箱吗?, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            row.originalEmail = row.email;
            updateEmailApi(row.originalEmail).then((res) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.getList();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改",
            });
            row.email = row.originalEmail;
          });
      }
    },
  },
};
</script>
<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
